﻿<template>
  <div class="container" style="width:99%;margin-top:35px;">
    <div>
        {{dateMonthYear}}
    </div>
    <!--表格内容栏-->
    <div class="btns">
      <Crm-table
        class="table-width"
        MarketingCalendarConfig
        width="400"
        permsEdit="MarketingManage:MarketingCalendarConfig:edit"
        permsDelete="MarketingManage:MarketingCalendarConfig:delet"
        :data="pageResult"
        :columns="columns"
        :loading="loading"
        @findPage="findPage"
        @handleEdit="handleEdit"
        @handleDeleteDic="handleDeleteDic"
        :showBatchDelete="false"
      ></Crm-table>
    </div>
    <!--新增界面-->
    <el-dialog
      :title="operation?'新增月度营销日历':'编辑'"
      class="query-box calendarPop"
      width="30%"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
    >
      <el-form :model="addBox" ref="addBox">
        <el-row>
          <div class="depart-box">
              <div class="slect-title">位置</div>
              <el-input
                style="heigth:39px;"
                :disabled="true"
                v-model="addBox.positionStr"
                placeholder="请输入内容"
              ></el-input>
            </div>
        </el-row>
        <el-row style="margin-top:22px;">
            <div class="depart-box">
              <div class="slect-title">标题</div>
              <el-input
                style="heigth:39px;"
                v-model="titles"
                placeholder="请输入内容"
                :disabled="!titleType"
              ></el-input>
            </div>
        </el-row>
        <el-row style="margin-top:22px;">
            <div class="depart-box">
              <el-input
                type="textarea"
                style="heigth:100px;"
                v-model="contents"
                placeholder="请输入内容"
                v-on:keyup.enter.native="enterFN"
              ></el-input>
            </div>
        </el-row>
      </el-form>
      <div slot="footer" style="text-align:center" class="dialog-footer">
        <el-button
          :size="size"
          @click.native="dialogVisible = false"
          >{{ $t("action.cancel") }}</el-button
        >
        <el-button
          :size="size"
          type="primary"
          @click.native="submitAdd"
          :loading="editLoading"
          >{{ $t("action.submit") }}</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import KtButton from "@/views/Core/KtButton";
import CrmTable from "@/views/Core/CrmTable";

import { CodeToText } from "element-china-area-data";
import { baseUrl } from "@/utils/global";
import axios from "axios";
import Cookies from "js-cookie";
export default {
  name: "MarketingCalendarConfig",
  components: {
    CrmTable,
    KtButton
  },
  data() {
    return {
      size: "mini",
      editLoading: false,
      queryBox: {},
      addBox: {
        marketingDate:'',
        marketingType:'',
        content:'',
        contents:'',
        calendarId:this.$route.query.calendarId
      },
      titles:"",
      contents:"",
      titleType:true,
      assignDate:'',
      mytime: "",
      dialogVisible: false, // 新增界面是否显示
      operation: true, // true:新增, false:编辑
      width: 200,
      columns: [
        { type: "index", label: "序号", minWidth: 50 },
        { prop: "positionStr", label: "位置", minWidth: 120 },
        { prop: "title", label: "标题", minWidth: 100 },
        { prop: "content", label: "内容", minWidth: 190 },
      ],
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: {
        content: []
      },
      // 限制跟进时间
      pickerOptions: {
        disabledDate(time) {
          let now = new Date();
          let nowMonth = now.getMonth(); //当前月 
          let nowYear = now.getFullYear(); //当前年 
          //本月的开始时间
          let monthStartDate = new Date(nowYear, nowMonth, 1); 
          //本月的结束时间
          let monthEndDate = new Date(nowYear, nowMonth+1, 0);
          let timeEnd=Date.parse(monthEndDate);//s
            return time.getTime() < Date.now()- 8.64e7 || time > timeEnd
          }
      },
      loading: false, // 加载标识
      dateMonthYear:this.$route.query.date,
      marketing_type_options:[]

    };
  },
  methods: {
    // 搜索
    search() {
      this.loading = true;
      this.pageRequest.pageNum = 1;
      this.findPage(null);
    },
    handleChange(value) {
      console.log(value);
    },
    
    get_dataTime() {
      let dateTime = new Date();
      let mytime = dateTime.toLocaleTimeString("chinese", { hour12: false }); //获取当前时间
      this.mytime = mytime;
      if(this.marketing_type_options.length==0){
        this.$api.user.optionsList({codeType: "calendar_type"}).then(res=>{
          this.marketing_type_options=res.keyValueList
          localStorage.setItem("calendarType",JSON.stringify(res.keyValueList))
        })
      }else{
        this.marketing_type_options=JSON.parse(localStorage.getItem('calendarType'))
      }
    },
    // 获取分页数据
    findPage: function(data) {
      if (data !== null) {                                        
            this.loading = true;
        this.pageRequest = data.pageRequest;
      }
      this.queryBox.pageSize = this.pageRequest.pageSize;
      this.queryBox.pageNum = this.pageRequest.pageNum;
      this.queryBox.calendarId=this.$route.query.calendarId
      this.$api.agent
        .calendarSideConfigList(this.queryBox)
        .then(res => {
          if (res.result == 2) {
            this.$message({
              message: res.msg,
              type: "error"
            });
          } else {
            let content = {
              content: res.data,
              totalSize: res.total
            };
            this.pageResult = content;
            this.pageResult.content.forEach(item => {
              switch(item.position){
                case 'top1':item.positionStr='顶部第一栏'
                break
                case 'top2':item.positionStr='顶部第二栏'
                break
                case 'top3':item.positionStr='顶部第三栏'
                break
                case 'left1':item.positionStr='第一周工作提醒'
                break
                case 'left2':item.positionStr='第二周工作提醒'
                break
                case 'left3':item.positionStr='第三周工作提醒'
                break
                case 'left4':item.positionStr='第四周工作提醒'
                break
                case 'left5':item.positionStr='第五周工作提醒'
                break
                case 'left6':item.positionStr='第六周工作提醒'
                break
                case 'right1':item.positionStr='第一周校历'
                break
                case 'right2':item.positionStr='第二周校历'
                break
                case 'right3':item.positionStr='第三周校历'
                break
                case 'right4':item.positionStr='第四周校历'
                break
                case 'right5':item.positionStr='第五周校历'
                break
                case 'right6':item.positionStr='第六周校历'
                break

              }
            });
            this.loading = false;
          }
        })
        .then(data != null ? data.callback : "");
    },
    DateMinus(date1, date2) {
      //date1:小日期   date2:大日期
      var sdate = new Date(date1);
      var now = new Date(date2);
      var days = now.getTime() - sdate.getTime();
      var day = parseInt(days / (1000 * 60 * 60 * 24));
      return day;
    },
    // 重置
    reset(queryBox) {
      this.queryBox.activityCode = "";
      this.queryBox.activityName = "";
      this.findPage(null);
    },
    handleNewADD() {
      this.dialogVisible = true;
      this.operation = true
    },
    // 删除
    handleDeleteDic(params){
      this.$confirm('确认清空吗？', '提示', {
          type: 'warning'
        }).then(() => {
        this.$api.agent.calendarSideConfigdeleteInfo({id:params.row.id}).then(res=>{
          if(res.result==1){
            this.$message({ message: res.msg, type: "success" });
            this.findPage(null)
          }else{
            this.$message({ message: res.msg, type: "error" });
            this.findPage(null)
          }
        })
      })
    },
    // 配置
    handleEdit(params){
      console.log(params)
      this.dialogVisible = true
      this.operation = false
      this.addBox=params.row
          this.addBox.positionStr=params.row.positionStr
        this.addBox.title=params.row.title
        this.contents=params.row.content
        this.titles=params.row.title
      if(params.index>2){
        this.titleType=false
      }
    },
    submitAdd() {
      this.editLoading = true;
      this.addBox.content=this.contents
      this.addBox.title=this.titles
      this.titles=""
      this.contents=""
      let params = Object.assign({}, this.addBox);
      this.$api.agent.calendarSideConfigupdateInfo(this.addBox).then(res => {
        this.editLoading = false;
        if (res.result ==1) {
          this.$message({ message: "操作成功", type: "success" });
          this.dialogVisible = false;
          this.$refs["addBox"].resetFields();
                this.addBox={
              marketingDate:'',
              marketingType:'',
              content:'',
              calendarId:this.$route.query.calendarId
            }
        } else {
          this.$message({ message: "操作失败, " + res.msg, type: "error" });
        }
        this.findPage(null);
      });
    },
    enterFN(){
      // if (this.addBox.contents.indexOf("\\n") >= 0) {
      // console.log(aaa + " 中有\n");
      // }
    }
  },
  mounted() {
    this.get_dataTime();
  }
};
</script>
<style>
@import url("../../assets/queryBox.css");
</style>
<style lang="scss" scoped>
.checked-person {
  font-weight: 500;
  display: inline-block;
  text-align: center;
  margin: 3% 0 3% 0;
}
.batchdistribution-pop-tit {
  font-size: 20px;
  font-weight: bold;
  display: inline-block;
  color: #303133;
}
.el-dialog__wrapper .el-form-item__content {
  margin-left: 0;
}
.demo-form-inline {
  width: 90%;
  margin: 0 auto;
  .el-dialog__body .el-input {
    width: 93% !important;
  }
  .el-select {
    width: 100% !important;
  }
  .tit {
    display: inline-block;
    margin-top: 10%;
  }
}
.btn .el-button {
  padding: 9px 5px !important;
}
.calendarPop{
  .el-input, .el-select{
    width: 100%;
  }
}
</style>
<style>
.batchdistribution-pop .el-dialog__header {
  padding: 0 0 0 0 !important;
}
.el-textarea__inner{
  min-height: 100px !important;
}
</style>
